<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangzhanhua
 * @Date: 2021-01-11 10:20:45
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-03-06 11:40:20
-->
<template>
  <div class="workPlanCard">
    <div class="cardContainer">
      <div class="cardTop">
        <div class="cardAvator">
          <img :src="cardObj.shipName != '地方驳'?yellowShip:blueShip" alt="" width="60px" height="60px" />
        </div>
        <div class="right">
          <el-row :gutter="10">
            <el-col :span="18">
              <div class="cardRight">
                <div class="cardTitle">{{ cardObj.shipName }}</div>
                <div class="cardDetailMsg">
                  <div class="msgRow">
                    <!-- <img src="../../assets/svg/定位.svg" alt=""> -->
                    <i class="iconfont icon-1-014"></i>
                    <el-tooltip class="item" effect="light" :content="cardObj.bearth" placement="top">
                      <span class="msgName">{{ cardObj.bearth }}</span>
                    </el-tooltip>
                  </div>
                  <div class="loadFlag">
                    <!-- <img src="../../assets/svg/定位.svg" alt=""> -->
                    <i class="iconfont" :class="
                        cardObj.loadFlag == '卸' ? 'icon-1-061' : 'icon-1-051'
                      "></i>
                    <span>{{ cardObj.loadFlag }}</span>
                  </div>
                </div>
                <div class="cargo" style="margin-bottom: 10px">
                  <img src="../../assets/svg/pingming.svg" alt="" />
                  <el-tooltip class="item" effect="light" :content="cardObj.cargoName" placement="top">
                    <span class="cargoName">{{ cardObj.cargoName }}</span>
                  </el-tooltip>
                </div>
                <div class="cargo">
                  <i class="iconfont icon-1-041"></i>
                  <el-tooltip class="item" effect="light" :content="cardObj.shipperName" placement="top">
                    <span class="shipperName">{{ cardObj.shipperName }}</span>
                  </el-tooltip>
                </div>
              </div>
            </el-col>
            <el-col :span="6" style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              ">
              <el-tooltip class="item" effect="light" content="编辑" placement="top">
                <span class="edit" style="color: #0b6cd6; white-space: nowrap" @click="edit">
                  <i class="iconfont icon-1-07" style="font-size: 22px"></i>
                  <span class="msgName" style="padding-left: 2px">编辑</span>
                </span>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="cardDown">
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="downMsg">
              <!-- <img src="../../assets/svg/白天.svg" alt=""> -->
              <i class="iconfont icon-1-031"></i>
              <span class="dmName"> 白班: </span>
              <el-tooltip class="item" effect="light" :content="cardObj.lightTon+'吨'" placement="top">
                <span class="dmNum"> {{ cardObj.lightTon }}吨 </span>
              </el-tooltip>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="downMsg">
              <!-- <img src="../../assets/svg/夜晚.svg" alt=""> -->
              <i class="iconfont icon-1-023"></i>
              <span class="dmName"> 中班: </span>
              <el-tooltip class="item" effect="light" :content="cardObj.lunchTon+'吨'" placement="top">
                <span class="dmNum"> {{ cardObj.lunchTon }}吨 </span>
              </el-tooltip>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="downMsg">
              <!-- <img src="../../assets/svg/夜晚.svg" alt=""> -->
              <i class="iconfont icon-1-015"></i>
              <span class="dmName"> 晚班: </span>
              <el-tooltip class="item" effect="light" :content="cardObj.nightTon+'吨'" placement="top">
                <span class="dmNum"> {{ cardObj.nightTon }}吨 </span>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "workPlanCard",
  props: {
    cardObj: {
      type: Object,
      default: () => {
        return {
          id: "",
          shipName: "金增_20123654",
          bearth: "大港33",
          loadFlag: "201",
          cargoName: "煤炭",
          nightTon: "8888",
          lightTon: "8888",
        };
      },
    },
    editFun: {
      type: Function,
    },
  },
  data() {
    return {
      blueShip: require('../../assets/svg/blueShip.svg'),
      yellowShip: require('../../assets/img/yellowShip.png'),
    }
  },
  methods: {
    edit() {
      this.editFun(this.cardObj.id);
    },
  },
};
</script>

<style lang="less" scoped>
.right {
  width: calc(100% - 70px);
}
.loadFlag {
  padding-right: none;
  min-width: 40px;
}
.msgName {
  position: relative;
  top: -3px;
}
.workPlanCard {
  // background: #eaeaea;
  font-size: 14px;
  color: #303133;
  margin-bottom: 10px;

  .cardContainer {
    width: 100%;
    height: 220px;
    padding: 33px 10px 0 15px;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    .cardTop {
      //   width: 100%;
      padding: 0 5px 11px 5px;
      border-bottom: 1px dashed #ebeef5;
      display: flex;
      // display: flex;
      .cardAvator {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        margin: 0 auto;
      }
      .cardRight {
        .cardTitle {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 16px;
          font-size: 18px;
          // color: #303133;
          font-weight: bolder;
        }
        .cardDetailMsg {
          display: flex;
          margin-bottom: 10px;
          width: 100%;
          justify-content: space-between;
          .msgRow {
            margin-right: 10px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            img {
              padding-right: 1px;
            }
          }
        }
        .cargo {
          // overflow: hidden;
          white-space: nowrap;
          // text-overflow: ellipsis;
          .cargoName {
            position: relative;
            top: 1px;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .shipperName {
            position: relative;
            top: 3px;
            display: inline-block;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .cardDown {
      height: 45px;
      line-height: 45px;
      margin-top: 5px;
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      font-size: 16px;
      .downMsg {
        // margin-right: 10px;
        display: flex;
        align-items: center;
        .dmName {
          margin: 0 5px;
          white-space: nowrap;
        }
        .dmNum {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .edit {
    cursor: pointer;
  }
}
</style>